<template>
  <view class="coupon" :class="[customClass]" :style="[couponStyle]">
    <view :class="{ 'opacity-5': disabled }">
      <view v-if="info.isVipCoupon" class="tips-tag tips-tag_vip">会员优惠券</view>
      <view v-else-if="info.isBeGoingToExpire && showExpire" class="tips-tag tip-tag_date" :style="[useThemeStyle(), useThemeRGBAStyle('backgroundColor', 0.15)]">将到期</view>

      <view class="pl-26 pr-40 pt-42 pb-28 radius-10 flex justify-between" :style="[backgroundStyle]" @click="handleClick">
        <view class="flex flex-col flex-1 mr-24">
          <view class="font-30 font-700 text-row-2">{{ info.couponName }}</view>
          <view v-if="showTag" class="flex mt-12">
            <view class="tag" :style="[tagStyle]">{{ info.definitionCouponTypeName }}</view>
            <view class="tag" :style="[tagStyle]">{{ info.couponType == 1 ? "1个座位限一张" : "1笔订单限一张" }}</view>
          </view>
          <view class="text-999 mt-10 font-24 whitespace-nowrap" :style="[dateStyle]">
            {{ info.sD || info.startTime | formatDate("YYYY.MM.DD") }}-{{ info.eD || info.endTime | formatDate("YYYY.MM.DD") }}
          </view>
        </view>
        <view class="flex">
          <!-- 兑换券类型，isShowExValue为0不显示，通过装修渠道控制的 -->
          <view v-if="info.isShowExValue !== 0" class="flex flex-col items-end">
            <view class="text-price-mini-before text-price font-50 font-bold text-line-1" :style="[priceStyle]">{{ showPrice | formatDigit }}</view>
            <view class="" :style="[useRuleStyle]">{{ useRule }}</view>
          </view>
          <view v-if="showType === 'select'" class="flex items-start ml-30 mt-6">
            <zm-checkbox v-if="info.isVipCoupon" round :value="selected" icon-size="32rpx" icon-color="#7B2E06" checked-icon-color="#7B2E06" @click="handleClick"> </zm-checkbox>
            <zm-checkbox v-else round :value="selected" icon-size="32rpx" @click="handleClick"> </zm-checkbox>
          </view>
        </view>
      </view>
      <view class="rule-wrap flex flex-col" @click="ruleOpen = !ruleOpen">
        <view class="line"></view>
        <view
          class="flex items-center justify-between py-26 pl-26 pr-40 radius-bl-10 radius-br-10 overflow-hidden"
          :style="{ background: info.isVipCoupon && 'linear-gradient(90deg, #FFF3E5 0%, #FDCE99 100%)' }"
        >
          <view class="mr-auto text-999" :style="{ color: info.isVipCoupon && '#9A6F52' }">使用规则</view>
          <view class="transition" :class="{ 'transform-rotate-180': ruleOpen }">
            <u-icon name="arrow-down" size="28rpx" :color="info.isVipCoupon ? '#9A6F52' : '#999'"></u-icon>
          </view>
        </view>
        <view v-if="ruleOpen" class="rule-detail px-30 pt-20">
          <view v-if="showPassword" class="text-999 font-24 text-point pl-10 mb-20">券密码：{{ info.couponId }}</view>
          <view v-for="(item, index) in info.useTip" :key="index" class="text-999 font-24 text-point pl-10 mb-20">{{ item }}</view>
        </view>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
import weixin from "@/mixins/weixin.js"
export default {
  name: "coupon",
  mixins: [weixin],
  props: {
    // 优惠券数据
    info: {
      type: Object,
      default: () => {}
    },
    // select 选择模式， detail 查看模式
    showType: {
      type: String,
      default: "detail"
    },
    // 是否选中
    selected: {
      type: Boolean,
      default: false
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示tag
    showTag: {
      type: Boolean,
      default: true
    },
    // 是否显示过期
    showExpire: {
      type: Boolean,
      default: true
    },
    // 数据来源类型
    fromType: {
      type: String,
      default: "coupon"
    },
    // 类名
    customClass: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      ruleOpen: false
    }
  },
  computed: {
    couponStyle() {
      const style = {}
      style["--line-color"] = this.info.isVipCoupon ? "#efc499" : this.useColor("page")
      return style
    },
    backgroundStyle() {
      const style = {}
      if (this.info.isVipCoupon) {
        style.background = "linear-gradient(90deg, #FFF3E5 0%, #FDCE99 100%)"
      } else {
        style.background = "#fff"
      }
      return style
    },
    showPassword() {
      // 未领取的会员券，不显示券密码
      return !(this.showType == "select" && this.info.isVipCoupon)
    },
    // 券规则 couponType 券类型 1=兑换 2=满减
    // 券面展示减免金额,根据不同的数据类型区分显示
    showPrice() {
      // 送呗数据类型
      if (this.fromType === "giftGiving") {
        if (this.info.couponType == "2") {
          // tips：这个金额很多地方显示的字段不统一 😭
          return this.info.discountType == 1 ? this.info.canFreePrice || this.info.reduceMoney : this.info.moneyOffConfig?.reduceMoney
        } else if (this.info.couponType == "1") {
          return this.info.ticketValue || this.info.exValue
        }
      } else {
        if (this.info.couponType == "2") {
          return this.info.discountType == 1 ? this.info.showReduce : this.info.moneyOffConfig?.reduceMoney
        } else if (this.info.couponType == "1") {
          return this.info.ticketValue || this.info.exValue
        }
      }
      return ""
    },
    useRule() {
      // 送呗数据类型
      if (this.fromType === "giftGiving") {
        if (this.info.couponType == "2") {
          if (this.info.discountType == "1") return "无门槛"
          if (this.info.discountType == "2") return `满${uni.$formatDigit(this.info.moneyOffConfig?.money)}元可用`
          if (this.info.discountType == "3") return `满${this.info.moneyOffConfig?.ticketNum}个座位`
          return `满${uni.$formatDigit(this.info.moneyOffConfig?.money)}元可用`
        }
      } else {
        if (this.info.couponType == "2") {
          if (this.info.discountType == "1") return "无门槛"
          if (this.info.discountType == "2") return `满${uni.$formatDigit(this.info.moneyOffConfig?.money)}元可用`
          if (this.info.discountType == "3") return `满${this.info.moneyOffConfig?.ticketNum}个座位`
          return `满${uni.$formatDigit(this.info.moneyOffConfig?.money)}元可用`
        }
      }
      return ""
    },
    tagStyle() {
      const style = {}
      if (this.info.isVipCoupon) {
        style.color = "#fff"
        style.borderColor = "#A16A48"
        style.backgroundColor = "#A16A48"
      } else if (this.info.exchangeMethod == "2") {
        style.color = "#72C2F1"
        style.borderColor = "#72C2F1"
      } else if (this.info.couponType == "1") {
        style.color = "#FFA51A"
        style.borderColor = "#FFA51A"
      } else if (this.info.couponType == "2") {
        if (this.info.discountType == "1") {
          style.color = "#08C5AF"
          style.borderColor = "#08C5AF"
        }
        if (this.info.discountType == "2" || this.info.discountType == "3") {
          style.color = this.useColor("theme")
          style.borderColor = this.useColor("theme")
        }
      } else {
        style.color = this.useColor("theme")
        style.borderColor = this.useColor("theme")
      }
      return style
    },
    dateStyle() {
      const style = {}
      if (this.info.isVipCoupon) {
        style.color = "#9A6F52"
      }
      return style
    },
    priceStyle() {
      const style = {}
      if (this.info.isVipCoupon) {
        style.color = "#7B2E06"
      }
      return style
    },
    useRuleStyle() {
      const style = {}
      if (this.info.isVipCoupon) {
        style.color = "#9A6F52"
      }
      return style
    }
  },
  // mounted() {
  //   console.log("coupon渲染完成时间：", uni.$dayJs().format("HH-mm-ss"))
  // },
  methods: {
    handleClick() {
      this.$emit("click", this.info)
      if (this.showType == "detail") {
        this.$emit("look", this.info)
      } else {
        if (!this.disabled) {
          this.$emit("check", this.info)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.vip-color {
  color: #7b2e06;
}
.coupon {
  overflow: hidden;
  position: relative;
  border-radius: 16rpx;
  background-color: #fff;
  .tips-tag {
    top: 0;
    left: 0;
    height: 32rpx;
    font-size: 20rpx;
    display: flex;
    position: absolute;

    align-items: center;
  }
  .tip-tag_date {
    padding: 0 10rpx;
    background: #ff7538;
    border-radius: 10rpx 0rpx 10rpx 0rpx;
  }
  .tips-tag_vip {
    padding: 0 14rpx;
    color: #fff;
    font-size: 20rpx;
    font-weight: 500;
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    background: linear-gradient(279deg, #5b3104 0%, #ae7555 100%);
  }

  .tag {
    height: 28rpx;
    padding: 0 8rpx;
    color: var(--theme-color);
    font-size: 18rpx;
    display: flex;
    margin-right: 6rpx;
    align-items: center;
    border-radius: 6rpx;
    border: 1rpx solid var(--theme-color);
  }
  .rule-wrap {
    position: relative;
    &::after,
    &::before {
      content: " ";
      top: -14rpx;
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      position: absolute;
      background-color: var(--page-color);
    }
    &::after {
      left: -14rpx;
    }
    &::before {
      right: -14rpx;
    }
    .line {
      top: 0;
      left: 30rpx;
      width: calc(100% - 60rpx);
      position: absolute;
      border-top: 2rpx dashed var(--line-color);
    }
  }
  .rule-detail {
    background-image: linear-gradient(180deg, #f5f5f5 0%, #ffffff 100%);
    background-size: 100% 50px;
    background-repeat: no-repeat;
    .text-point {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        width: 5rpx;
        height: 5rpx;
        background: #999999;
        border-radius: 50%;
        left: 0;
        top: 0;
        margin-top: 15rpx;
      }
    }
  }
}
</style>
